<template>
  <div class="card-box">
    <div>
      <h3>物流列表：</h3>
      <span class="tag" v-for="item in expressList" :key="item"
        >{{ item }}
      </span>
    </div>
    <br />
    <div>
      <h3>操作：</h3>
      物流ID：<input
        type="text"
        v-model="expressId"
        placeholder="示例：YD"
      />&nbsp; 物流公司：<input
        type="text"
        v-model="expressName"
        placeholder="示例：韵达"
      />
      <button class="pull-right" @click="addNewExpress">添 加</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      expressId: "",
      expressName: "",
      // expressList: ["ZT-中通", "YT-圆通", "SF-顺丰"],
    };
  },
  computed: {
    ...mapState({
      expressList: (state) => state.express.expressList,
    }),
  },
  methods: {
    ...mapMutations({
      addExpress : 'express/addExpress'
    }),
    addNewExpress() {
      if (this.expressId && this.expressName) {
        // this.expressList.push(this.expressId + "-" + this.expressName);
        this.addExpress({
          id: this.expressId,
          name : this.expressName
        })
      }
    },
  },
};
</script>

<style>
</style>